<template>
  <el-dialog
    :title="dialogTitle"
    v-model="visible"
    width="50%"
    @close="handleClose"
  >
    <el-form :model="detailData" label-width="100px" class="vehicle-form">
      <el-row :gutter="20">
        <!-- 第一列 -->
        <el-col :span="8">
          <el-form-item label="车辆名称">
            <el-input v-model="detailData.vehicleName" disabled />
          </el-form-item>
          <el-form-item label="车辆号码">
            <el-input v-model="detailData.licensePlate" disabled />
          </el-form-item>
          <el-form-item label="维修日期" >
            <el-input v-model="detailData.repairDate"  disabled />
          </el-form-item>
          <el-form-item label="维修费用">
            <el-input v-model="detailData.repairCost" disabled />
          </el-form-item>
        </el-col>

        <!-- 第二列 -->
        <el-col :span="8">
          <el-form-item label="维修内容">
            <el-input v-model="detailData.repairContent" disabled />
          </el-form-item>
          <el-form-item label="维修地点">
            <el-input v-model="detailData.repairLocation" disabled />
          </el-form-item>
          <el-form-item label="经手人">
            <el-input v-model="detailData.handlerId" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 补充行：当前里程和日期类字段 -->
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue'
const visible = ref(false)
const dialogTitle = ref('')

const detailData = reactive({
  vehicleName: undefined,
  licensePlate: undefined,
  repairDate: undefined,
  repairCost: undefined,
  repairContent: undefined,
  repairLocation: undefined,
  handlerId: undefined
})


const open = (type: string, data: any) => {
  visible.value = true
  dialogTitle.value = type === 'view' ? '查看维修记录' : '编辑维修记录'
  Object.assign(detailData, data)
}

const handleClose = () => {
  visible.value = false
  // 可以在这里进行一些清理操作
}

// 暴露 open 方法给父组件
defineExpose({
  open
})

// 可选：添加调试信息以确认组件已加载
console.log('HandoverManagementDetail 组件已加载')
</script>

<style scoped>
.vehicle-form {
  padding: 10px 0;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-dialog__body {
  padding: 10px 20px;
}

.el-form-item__label {
  text-align: left;
  font-weight: bold;
  color: #333;
}
.image-preview {
  width: 100%;
  height: 200px; /* 设置固定高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e4e4e4;
  background-color: #f9f9f9;
  overflow: hidden;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>
